<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平台介绍 - 朋知云学</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <style>
        .about-section {
            padding: 60px 0;
        }
        .about-header {
            text-align: center;
            margin-bottom: 50px;
        }
        .about-header h1 {
            font-size: 2.5rem;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .about-header p {
            font-size: 1.2rem;
            color: #7f8c8d;
            max-width: 800px;
            margin: 0 auto;
        }
        .about-content {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 50px;
        }
        .about-text {
            flex: 1;
            min-width: 300px;
        }
        .about-text h2 {
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .about-text p {
            margin-bottom: 15px;
            line-height: 1.6;
        }
        .about-image {
            flex: 1;
            min-width: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .about-image img {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .mission-values {
            background-color: #f8f9fa;
            padding: 50px 0;
            margin: 30px 0;
            border-radius: 8px;
        }
        .mission-values h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        .values-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }
        .value-card {
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            flex: 1;
            min-width: 250px;
            max-width: 300px;
        }
        .value-card i {
            font-size: 2rem;
            color: #5bc0eb;
            margin-bottom: 15px;
        }
        .value-card h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        .team-section {
            padding: 40px 0;
        }
        .team-section h2 {
            text-align: center;
            margin-bottom: 40px;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <img src="../static/avatar1.png" alt="朋知云学">
                <span>朋知云学</span>
            </div>
            <nav class="nav-menu">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="demands.html">支教需求</a></li>
                    <li><a href="ai-assistant.html">AI助手</a></li>
                    <li><a href="user-center.html">用户中心</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- 平台介绍内容 -->
    <section class="about-section">
        <div class="container">
            <div class="about-header">
                <h1>关于朋知云学</h1>
                <p>连接有需要的学校和志愿者，共同创造教育的未来</p>
            </div>
            
            <div class="about-content">
                <div class="about-text">
                    <h2>我们的故事</h2>
                    <p>朋知云学成立于2023年，是一个致力于促进教育公平的支教平台。我们的创始团队由一群热爱教育、关注乡村教育发展的年轻人组成。在实地调研中，我们发现许多偏远地区的学校面临师资短缺的问题，而同时有大量有志于支教的志愿者却找不到合适的渠道。</p>
                    <p>基于这一现状，我们创建了朋知云学平台，旨在搭建一座连接学校与志愿者的桥梁，让支教变得更加简单、高效和有意义。通过我们的平台，学校可以发布支教需求，志愿者可以找到适合自己的支教机会，双方可以直接对接，减少中间环节。</p>
                    <p>平台名称"朋知云学"寓意着朋友之间的知识分享，通过云端连接，共同学习成长。我们相信，每一次支教不仅是知识的传递，更是心灵的交流和成长的机会。</p>
                </div>
                <div class="about-image">
                    <img src="../static/avatar1.png" alt="朋知云学团队">
                </div>
            </div>
            
            <div class="mission-values">
                <div class="container">
                    <h2>我们的使命与价值观</h2>
                    <div class="values-grid">
                        <div class="value-card">
                            <i class="bi bi-lightbulb"></i>
                            <h3>教育公平</h3>
                            <p>我们致力于通过支教活动，缩小城乡教育差距，让每个孩子都能获得优质的教育资源。</p>
                        </div>
                        <div class="value-card">
                            <i class="bi bi-people"></i>
                            <h3>连接共享</h3>
                            <p>搭建学校与志愿者之间的桥梁，促进教育资源的高效流动和共享。</p>
                        </div>
                        <div class="value-card">
                            <i class="bi bi-heart"></i>
                            <h3>成长陪伴</h3>
                            <p>支教不仅是知识的传递，更是心灵的交流，我们重视每一位参与者的成长与收获。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="about-content">
                <div class="about-image">
                    <img src="../static/nav1.png" alt="平台特色">
                </div>
                <div class="about-text">
                    <h2>平台特色</h2>
                    <p><strong>精准匹配：</strong>我们的平台根据学校需求和志愿者专长进行智能匹配，提高支教效率。</p>
                    <p><strong>全程支持：</strong>从申请到结束，我们提供全流程的指导和支持，解决支教过程中的各种问题。</p>
                    <p><strong>AI助手：</strong>创新性地引入AI技术，为志愿者提供教学资源、备课建议和个性化支持。</p>
                    <p><strong>社区互动：</strong>建立支教志愿者社区，促进经验分享和交流，形成良好的支教生态。</p>
                </div>
            </div>
            
            <div class="team-section">
                <h2>加入我们</h2>
                <p style="text-align: center; max-width: 800px; margin: 0 auto 30px;">
                    无论您是想参与支教的志愿者，还是需要支教资源的学校，或是希望为教育公平贡献力量的合作伙伴，朋知云学都欢迎您的加入。
                    让我们携手共建一个更加公平、更有温度的教育环境。
                </p>
                <div style="text-align: center;">
                    <a href="contact.html" class="btn btn-primary">联系我们</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="../static/avatar1.png" alt="朋知云学">
                    <p>朋知云学 - 让支教更简单</p>
                </div>
                <div class="footer-links">
                    <div class="link-group">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="about.html" class="active">平台介绍</a></li>
                            <li><a href="rules.html">用户守则</a></li>
                            <li><a href="contact.html">联系我们</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>帮助中心</h4>
                        <ul>
                            <li><a href="tutorial.html">使用教程</a></li>
                            <li><a href="faq.html">常见问题</a></li>
                            <li><a href="feedback.html">意见反馈</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>法律信息</h4>
                        <ul>
                            <li><a href="agreement.html">用户协议</a></li>
                            <li><a href="privacy.html">隐私政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 朋知云学. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>